<template>
  <div>
    <div><center><h1>公司内部业务处理</h1></center></div>
      <div><center><h2>个人待处理业务</h2></center></div>
      <div>
          <el-table :data="self_list" border style="width: 80%">
              <el-table-column fixed prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column fixed prop="username" label="申请人" width="150">
            </el-table-column>
            <el-table-column fixed prop="process_instance_id" label="流程名" width="150">
            </el-table-column>
            <el-table-column fixed prop="point_id" label="节点名" width="150">
            </el-table-column>
            <el-table-column fixed prop="actor" label="操作人" width="150">
            </el-table-column>
            <el-table-column fixed prop="point_state" label="节点状态" width="150">
            </el-table-column>
            <el-table-column fixed prop="process_state" label="流程状态" width="150">
            </el-table-column>
          </el-table>
      </div>
      <div><center><h2>公司待处理业务</h2></center></div>
      <div>
          <el-table :data="other_list" border style="width: 80%">
              <el-table-column fixed prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column fixed prop="username" label="申请人" width="150">
            </el-table-column>
            <el-table-column fixed prop="process_instance_id" label="流程名" width="150">
            </el-table-column>
            <el-table-column fixed prop="point_id" label="节点名" width="150">
            </el-table-column>
            <el-table-column fixed prop="actor" label="操作人" width="150">
            </el-table-column>
            <el-table-column fixed prop="point_state" label="节点状态" width="150">
            </el-table-column>
            <el-table-column fixed prop="process_state" label="流程状态" width="150">
            </el-table-column>
            
            
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button @click="deal(scope.row.id)" type="text" size="small"
                  >去处理</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>
      <div>
        <el-dialog title="业务处理" :visible.sync="dialogFormVisible">
          <el-form ref="form" v-for="(item,i) in form1" :key="i" v-model="form" label-width="50px">
            <el-form-item :label='item.attr'>
                <span v-show="item.attr=='姓名'">
                    <el-input v-model="form[item.attr]" placeholder="请输入姓名"></el-input>
                </span>
                <span v-show="item.attr=='给出意见'">
                    <el-input v-model="form[item.attr]" placeholder="请给出意见" ></el-input>
                </span>
                <span v-show="item.attr=='是否同意'">
                  <el-radio v-model="form[item.attr]" label="1">同意</el-radio>
                  <el-radio v-model="form[item.attr]" label="2">不同意</el-radio>
                </span>
            </el-form-item>
        </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
          </div>
        </el-dialog>
      </div>
  </div>
</template>

<script>
export default {
data(){
  return{
    self_list:[],
    other_list:[],
    dialogFormVisible:false,
    form1:[],
    form:{},
    radio:'',
    username_id:'',
    pstate:{
      '0':'已提交',
      '1':'经理已审批',
      '2':'主管已审批',
      '3':'总监已审批',
      '4':'财务已审批'
    },
    rstate:{
      '0':'未审批',
      '1':'已通过',
      '2':'已驳回'
    }
  }
},
mounted(){
  this.getPro()
},
methods:{
  getPro(){
    this.$axios.get('process/api/v1/apply/')
    .then(res=>{
      console.log(res)
      if (res.data.code == 200){
        this.self_list = res.data.process_self
        this.other_list = res.data.process_other
      }
    })
  },
  deal(id){
    this.dialogFormVisible=true
    this.username_id = id
    this.$axios.get('process/api/v1/check/'+id+'/')
    .then(res=>{
      console.log(res)
      if(res.data.code == 200){
        this.form1 = res.data.data
      }
    })
  },
  confirm(){
    this.dialogFormVisible = false
    this.$axios.post('process/api/v1/check/',{
      username_id:this.username_id,
      form:this.form
    })
    .then(res=>{
      console.log(res)
      if (res.data.code == 200){
        alert(res.data.msg)
        this.getPro()
      }
    })
  }
}
}
</script>

<style>

</style>